<template>
  <div class="container">
    <!-- <div class="search_box">
      <input
        type="text"
        class="search_input"
        placeholder="请输入员工名称"
        v-model="workername"
        @input="searchWorker"
      >
    </div>-->
    <ul class="employee_ul" v-if="employeeList.length > 0">
      <li
        class="employee_li flex"
        v-for="item in employeeList"
        :key="item.user_id"
        :data-userid="item.user_id"
        @tap="checkEmployee"
      >
        <span class="user_pic">
          <img :src="item.headurl || '/static/imgs/system_user.png'" alt>
        </span>
        <div class="user_info flex-item">
          <label class="user_name">{{item.username}}</label>
          <label class="user_details">{{item.position}}&nbsp;&nbsp;&nbsp;</label>
        </div>
      </li>
    </ul>
    <Empty message="暂无员工列表！" v-if="employeeList.length == 0"></Empty>
  </div>
</template>

<script>
import wx from 'wx'
// import api from '@/utils/api'
import Empty from '@/components/empty'
export default {
  data () {
    return {
      employeeList: [],
      workername: ''
    }
  },

  components: {
    Empty
  },
  onLoad () {
  },
  methods: {
    searchWorker () {
      // this.getMyuser()
    },
    async getMyuser () {
      // const res = await api.getshopusers({
      //   departmentid: this.$route.query.departmentid,
      //   workername: this.workername
      // })
      const res = wx.getStorageSync('user')
      if (res.length !== 0) {
        let workerdata = [];
        for (var i = 0; i < res.length; i++) {
          workerdata.push({
            'user_id': res[i].id,
            'username': res[i].name,
            'lastname': res[i].name.charAt(res[i].name.length - 1),
            'position': res[i].zhichengname + '·' + res[i].positionname,
            'headurl': res[i].headurl
          })
        }
        this.employeeList = workerdata
      } else {
        this.employeeList = []
      }
    },
    checkEmployee (e) {
      let userid = e.mp.currentTarget.dataset.userid;
      wx.setStorageSync('params_userid', userid)
      wx.navigateTo({
        url: '/pages/worker/checkEmployees/checkEmployees'
      })
    }
  },
  created () {
  },
  onShow () {
    wx.setNavigationBarTitle({
      title: '员工管理'
    })
    this.getMyuser()
  },
  onReady () {
  }
}
</script>

<style scoped>
view {
  -webkit-overflow-scrolling: touch;
}
.container {
  /* padding-top: 96rpx; */
  background-color: #fff;
}
.search_box {
  width: 100%;
  padding: 30rpx 30rpx 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(153, 153, 153, 0.1);
}
.search_input {
  height: 64rpx;
  box-sizing: border-box;
  padding: 14rpx 33rpx;
  background: #fff;
  border-radius: 32rpx;
  font-size: 28rpx;
  color: rgba(153, 153, 153, 1);
  position: relative;
  z-index: 1;
}
.search_input::after {
  content: "";
  position: absolute;
  right: 30rpx;
  top: 20rpx;
  width: 23rpx;
  height: 29rpx;
  background: url(http://mytimg.178mr.com/search_btn.png) no-repeat;
  background-size: 100%;
  z-index: 2;
}
.employee_ul {
  width: 100%;
  padding-left: 32rpx;
  background: #fff;
}
.employee_ul .employee_li {
  width: 100%;
  padding: 28rpx 0;
  border-bottom: 2rpx solid RGBA(153, 153, 153, 0.2);
}
.employee_ul .employee_li .user_pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.employee_ul .employee_li img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.employee_ul .employee_li .user_info label {
  display: block;
}
.employee_ul .employee_li .user_info .user_name {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 10rpx;
}
.employee_ul .employee_li .user_info .user_details {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
</style>
